<!-- 成控部：大货型体建档   蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" :searchImg="false" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 180px">
        <div class="flexSB mb10">
          <el-input v-model="searchStyle" placeholder="请输入型体" style="height: 26x"></el-input>
        </div>
        <el-button type="primary" size="default" @click="handleStyleNo" class="primaryBth">取研发型体</el-button>
        <Table :tableHeader="tableHeader" :tableData="tableData" class="mt10" @currentRow="currentRow" :isLoading="isLoading" :outTableHeight="120" />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '0px' }" style="width: 100%">
        <!-- 上部分 -->
        <div class="flexSB" style="width: 100%">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 280px">
            <h1 class="f16 mb18">基本资料</h1>
            <el-form label-width="80px" class="f16" label-position="left">
              <el-form-item label="客户">
                <el-input v-model="customer" placeholder="" clearable @change="" class="inputB" :disabled="inputDisabled"></el-input>
              </el-form-item>
              <el-form-item label="大底厂商">
                <el-input v-model="outsole" placeholder="" clearable @change="" class="inputB" :disabled="inputDisabled"></el-input>
              </el-form-item>
            </el-form>
          </el-card>

          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <div class="flex mb18">
              <h1 class="f16 mr10">型体配色资料</h1>
              <span class="ml20" style="color: red">修改后需点击保存按钮</span>
            </div>
            <Table
              :tableHeader="tableHeader2"
              :tableData="tableData2"
              class="mt10"
              @download="download"
              @successUpload="successUpload"
              :isLoading="isLoading2"
              :outTableHeight="150"
              :TableHeight="50"
            />
          </el-card>

          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <div class="flex mb18" style="flex-direction: column; align-items: center">
              <h1 class="f16 mb18">系统功能切换</h1>
              <el-button
                type="primary"
                size="small"
                @click="$router.push('/ControlDepartment/MaterialManagement/BulkQuantityFile')"
                class="primaryBth mb18"
                >转型体配色BOM建档</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="$router.push('/ControlDepartment/FactoryProduction/InstructionDataEntry')"
                class="primaryBth"
                >转指令资料输入</el-button
              >
            </div>
          </el-card>
        </div>

        <!-- 下部分 -->
        <div class="flex" style="width: 100%">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <div class="flex mb18">
              <h1 class="f16 mr10">配码资料</h1>
            </div>
            <Table
              :showToolTip="false"
              :tableHeader="tableHeader3"
              :tableData="tableData3"
              class="mt10"
              :outTableHeight="200"
              :isLoading="isLoading3"
              :TableHeight="50"
            />
          </el-card>
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <div class="flex">
              <el-button type="primary" class="primaryBth add" :icon="Plus" @click="addOne2">添加数据</el-button>
              <span class="ml20" style="color: red">添加后需点击保存按钮</span>
            </div>
            <Table
              :showToolTip="false"
              :tableHeader="tableHeader4"
              :tableData="tableData4"
              class="mt10"
              :outTableHeight="200"
              @inputChange="inputChange"
              :isLoading="isLoading4"
              :TableHeight="50"
            />
          </el-card>
        </div>
      </el-card>

      <el-dialog v-model="copyVisible" title="复制型体" width="39%">
        <el-form class="flex">
          <el-form-item label="原型体">
            <el-input disabled v-model="oldStyle" placeholder="" clearable @change="" style="width: 150px; height: 26px"></el-input>
          </el-form-item>
          <el-form-item label="新型体" class="ml20">
            <el-input v-model="newStyle" placeholder="" clearable @change="" style="width: 150px; height: 26px"></el-input>
          </el-form-item>
          <el-form-item class="ml20">
            <el-button style="" class="primaryBth" type="primary" size="default" @click="confirmChange('copy')">复制</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import SynchronizationLoginWork from '@/utils/SynchronizationLoginWork'
import Synchronization from '@/utils/Synchronization'
import { useRoute } from 'vue-router'
import JMessage from '@/utils/JMessage'
import service from '@/utils/request'
import LoginWork from '@/utils/LoginWork'
export default defineComponent({
  name: 'BulkBodyFile'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
const currentTable1Row = ref({}) as any
const copyVisible = ref(false)
const oldStyle = ref('')
const customer = ref('')
const outsole = ref('')
const newStyle = ref('')
const searchStyle = ref('')
const inputDisabled = ref(true)
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '型体代码',
    inputDisabled: true
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '鞋名'
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '号码'
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '——'
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '基本号'
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '版师'
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputValue: '',
    inputLabel: '核料员'
  },
  {
    type: 'button',
    checkboxLabel: '保存'
  },
  {
    type: 'button',
    checkboxLabel: '退出'
  },
  {
    type: 'button',
    checkboxLabel: '检核'
  },
  {
    type: 'button',
    checkboxLabel: '取消检核'
  },
  {
    type: 'button',
    checkboxLabel: '复制'
  },
  {
    type: 'button',
    checkboxLabel: '整单删除'
  }
])
const tableHeader = ref([
  {
    cfmFlag: '#00FF00',
    label: '型体',
    prop: 'styleNo'
  }
])
const imgList2 = ref([])
const tableHeader2 = ref([
  {
    label: '序号',
    prop: 'seqNo',
    width: 50
  },
  {
    label: '颜色代码',
    prop: 'colorCode'
  },
  {
    label: '型体颜色',
    prop: 'styleColor',
    width: '150'
  },
  {
    label: '客户型体',
    prop: 'devCode',
    width: '150'
  },
  {
    label: '季度',
    prop: 'season'
  },
  {
    label: '备注',
    prop: 'upperColor'
  },
  {
    width: 130,
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    srcList: imgList2
  },
  {
    type: 'upload',
    label: '上传图片',
    imgAction: '/kl/sell/updateSellStylePhoto'
  },
  {
    type: 'download',
    label: '下载图片',
    width: '120'
  }
])
const tableHeader3 = ref([
  {
    label: '序号',
    prop: 'typeNo',
    width: '50'
  },
  {
    label: '楦头',
    prop: 'lastMold',
    width: '100'
  },
  {
    label: '冲刀',
    prop: 'cutTool',
    width: '100'
  },
  {
    label: '大底',
    prop: 'solePart',
    width: '100'
  }
])
const tableHeader4 = ref([
  {
    type: 'input',
    label: '鞋码',
    prop: 'sizeNo'
  },
  {
    label: '冲刀',
    prop: 'cutSize'
  },
  {
    label: '楦头',
    prop: 'lastSize'
  },
  {
    label: '大底',
    prop: 'soleSize'
  },
  {
    label: '中底',
    prop: 'insoleSize'
  },
  {
    label: '鞋垫/脚床',
    prop: 'midsoleSize'
  }
])

// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '检核') {
    const res = (await SynchronizationLoginWork.post(`/sell/getCheckOut/${0}`, currentTable1Row.value)) as any
    if (res.code === 200) {
      JMessage.success('检核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '取消检核') {
    const res = (await SynchronizationLoginWork.post(`/sell/getCheckOut/${1}`, currentTable1Row.value)) as any
    if (res.code === 200) {
      JMessage.success('取消检核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '复制') {
    copyVisible.value = true
  }
  if (content === '整单删除') {
    const res = (await SynchronizationLoginWork.post(`/sell/getSellStyleDel`, currentTable1Row.value)) as any
    if (res.code === 200) {
      JMessage.success('整单删除成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '保存') {
    const res = (await SynchronizationLoginWork.post(`/sell/getSellStyleSave`, {
      ...currentTable1Row.value,
      typeNo: tableData3.value[0].typeNo, // 序号
      cutTool: tableData3.value[0].cutTool, // 冲刀编号
      lastMold: tableData3.value[0].lastMold, // 楦头编号
      solePart: tableData3.value[0].solePart, // 大底编号
      mtlChecker: formList.value[6].inputValue, // 检验员
      sampleDesigner: formList.value[5].inputValue, // 版师
      baseSize: formList.value[4].inputValue, // 基本号
      photoList: tableData2.value, // 型体配色资料集合
      size1: formList.value[2].inputValue, // 号码1
      size2: formList.value[3].inputValue, // 号码2
      sizeList: tableData4.value, // 型体配码资料集合
      soleVendor: outsole.value, // 检大底厂商
      styleName: formList.value[1].inputValue, // 鞋名
      custNo: customer.value
    })) as any
    if (res.code === 200) {
      JMessage.success('保存成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}
const tableData = ref([])
const isLoading = ref(true)

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/sell/getSellStyleList', {
    styleNo: searchStyle.value,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  tableData.value = tableDataList.list
  total.value = tableDataList.total
  formList.value[0].inputValue = tableDataList.list[0].styleNo
  formList.value[1].inputValue = tableDataList.list[0].styleName
  formList.value[2].inputValue = tableDataList.list[0].size1
  formList.value[3].inputValue = tableDataList.list[0].size2
  formList.value[4].inputValue = tableDataList.list[0].baseSize
  formList.value[5].inputValue = tableDataList.list[0].sampleDesigner
  formList.value[6].inputValue = tableDataList.list[0].mtlChecker
  outsole.value = tableDataList.list[0].soleVendor
  customer.value = tableDataList.list[0].custNo
  currentRow()
  getTableList2()
}, 500)

const route = useRoute() as any
onMounted(async () => {
  if (route.query.style) searchStyle.value = route.query.style

  await getTableList()
  getTableList3()
  getTableList4()
})
watch(searchStyle, () => {
  getTableList()
})

const handleStyleNo = async () => {
  const res = (await SynchronizationLoginWork.post('/sell/getSellStyle', {
    styleNo: searchStyle.value,
    overRide: '0'
  })) as any
  if (res.code === 200) {
    JMessage.success('取研发型体成功')
    getTableList()
  } else if (res.code === 301) {
    ElMessageBox.confirm(res.message, {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const res = (await SynchronizationLoginWork.post('/sell/getSellStyle', {
          styleNo: searchStyle.value,
          overRide: '1'
        })) as any
        if (res.code === 200) {
          JMessage.success('取研发型体成功')
          getTableList()
        } else {
          JMessage.error(res.message)
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消'
        })
      })
  } else {
    JMessage.error(res.message)
  }
}
const currentRow = (row: any = tableData.value[0]) => {
  currentTable1Row.value = row
  getTableList2(row)
  getTableList3(row)
  getTableList4(row)
  oldStyle.value = currentTable1Row.value.styleNo
  formList.value[0].inputValue = row.styleNo
  formList.value[1].inputValue = row.styleName
  formList.value[2].inputValue = row.size1
  formList.value[3].inputValue = row.size2
  formList.value[4].inputValue = row.baseSize
  formList.value[5].inputValue = row.sampleDesigner
  formList.value[6].inputValue = row.mtlChecker
  outsole.value = row.soleVendor
  customer.value = row.custNo
}

// 表二模块
// 表二按钮
const tableData2 = ref([]) as any
const isLoading2 = ref(true)
// 分页器
const currentPage2 = ref(1)
const pageSize2 = ref(40)
// 获取表数据
const getTableList2 = debounce(async (row: any = tableData.value[0]) => {
  isLoading2.value = true
  let tableDataList = await service.post<any, any>('/sell/getSellStyleColorList', {
    styleNo: row.styleNo
  })
  isLoading2.value = false
  imgList2.value = tableDataList.map((item: any) => {
    return item.photoPath
  })
  tableData2.value = tableDataList.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    return item
  })
  // currentRow2()
}, 500)
// 图片下载
const download = async (row: any) => {
  const a = document.createElement('a')
  fetch(row.photoPath)
    .then((res) => res.blob())
    .then((blob) => {
      // 将链接地址字符内容转变成blob地址
      a.href = URL.createObjectURL(blob)
      console.log(a.href)
      a.download = '图片.jpg' // 下载文件的名字
      // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字
      document.body.appendChild(a)
      a.click()
      //在资源下载完成后 清除 占用的缓存资源
      window.URL.revokeObjectURL(a.href)
      document.body.removeChild(a)
    })
}
// 上传成功函数
const successUpload = (res: any, row: any) => {
  row.photoPath = res
  imgList2.value = tableData2.value.map((item: any) => {
    return item.photoPath
  })
}
watch(currentTable1Row, () => {
  // 如果检核过了，就不能修改
  if (currentTable1Row.value.cfmFlag === 'Y') {
    // 查询List限定
    formList.value.forEach((item: any) => {
      item.inputDisabled = true
    })
    // 基本资料限定
    inputDisabled.value = true
    // 表二限定
    tableHeader2.value.forEach((item: any) => {
      item.change = true
    })
    // 表三限定
    tableHeader3.value.forEach((item: any) => {
      item.change = true
    })
    // 表四限定
    tableHeader4.value.forEach((item: any) => {
      item.change = true
    })
  } else {
    // 查询List限定
    formList.value.forEach((item: any, index: number) => {
      if (index !== 0) item.inputDisabled = false
    })
    // 基本资料限定
    inputDisabled.value = false
    // 表二限定
    tableHeader2.value.forEach((item: any) => {
      item.change = false
    })
    // 表三限定
    tableHeader3.value.forEach((item: any) => {
      item.change = false
    })
    // 表四限定
    tableHeader4.value.forEach((item: any) => {
      item.change = false
    })
  }
})
const confirmChange = async (type: string) => {
  if (type === 'copy') {
    const res = (await SynchronizationLoginWork.post('/sell/getSellStyleCopy', {
      styleNo: oldStyle.value,
      newStyleNo: newStyle.value
    })) as any
    if (res.code === 200) {
      JMessage.success('复制成功')
      copyVisible.value = false
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}

// 表三模块
const total3 = ref(0)
const tableData3 = ref([]) as any
const isLoading3 = ref(true)
// 获取表数据
const getTableList3 = debounce(async (row: any = tableData.value[0]) => {
  isLoading3.value = true
  const tableDataList = (await LoginWork.post<any, any>('/sell/getSellStyleTypeToList', {
    styleNo: row.styleNo
  })) as any
  isLoading3.value = false
  tableData3.value = tableDataList.data.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    return item
  })
}, 500)
// 添加配码资料
const addOne = () => {
  tableData3.value.unshift({
    typeNo: '',
    lastMold: '',
    cutTool: '',
    solePart: '',
    change: 'Y',
    disableConfirm: true
  })
}

// 表四模块
const isLoading4 = ref(true)
const tableData4 = ref([]) as any
// 获取表数据
const getTableList4 = debounce(async (row: any = tableData.value[0]) => {
  isLoading4.value = true
  const tableDataList = (await service.post<any, any>('/sell/getSellStyleSizeList', {
    styleNo: row.styleNo
  })) as any
  isLoading4.value = false
  tableData4.value = tableDataList.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    return item
  })
  total3.value = tableDataList
}, 500)

const obj = ref({
  sizeNo: ''
})
const addOne2 = () => {
  tableData4.value.unshift({
    ...obj.value,
    cutSize: '',
    lastSize: '',
    soleSize: '',
    insoleSize: '',
    midsoleSize: '',
    change: 'Y',
    disableConfirm: true
  })
}
// 鞋码变化，如果变了，这一行也要变成一样的
const inputChange = (row: any, currentLabel: any) => {
  // console.log(row, currentLabel);
  if (currentLabel === '鞋码') {
    row.cutSize = row.sizeNo
    row.lastSize = row.sizeNo
    row.soleSize = row.sizeNo
    row.insoleSize = row.sizeNo
    row.midsoleSize = row.sizeNo
  }
}
</script>

<style lang="less" scoped>
:deep(.current-row) {
  background-color: red !important;
}

.inputB {
  height: 26px;
}

.find {
  :deep(.el-form-item) {
    .el-input {
      height: 25px;
      width: 80px;
    }
  }
}

.add {
  background-color: #23c6c8 !important;
}

:deep(.imgDiv) {
  width: 100%;
  background-color: white;
  height: 80% !important;
  // .img {
  //   width: 70px;
  //   height: 26px;
  // }
}

// :deep(.el-form-item:nth-child(3)) {
//   .el-input {
//     width: 80px;
//   }
// }

// :deep(.el-form-item:nth-child(4)) {
//   .el-input {
//     width: 80px;
//   }
// }

// :deep(.el-form-item:nth-child(5)) {
//   .el-input {
//     width: 80px;
//   }
// }
</style>
